<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onLoad, onShow, onReachBottom, onHide } from '@dcloudio/uni-app';
import cardBox from './components/card.vue';
import leave from './components/leave.vue';
import { readList, appCommentPageList, appCommentUpdateRead, read, updateAll, removeAll } from '@/apis/message';
import noneBox from '@/components/noneBox/noneBox.vue';


let state = reactive({
  navFlag: 0,
  messageList: [],
  pageSize: 10, //条数
  pageNum: 1, //页数
  isMore: false
})
const modal =ref()
const modalDel =ref()
// 通知--消息查询-分页（已读、未读公用）
const getReadList = async () => {
  let params = {
    pageSize: state.pageSize,
    pageNum: state.pageNum
  }
  let { rows, code } = await readList(params) as any;
  if (code == '200') {
    if (rows.length <= 0) {
      state.isMore = true;
      return false;
    }
    state.pageNum++;
    state.messageList.push(...rows);
  }
}
const getAppCommentPageList = async()=>{
  let params = {
    pageSize: state.pageSize,
    pageNum: state.pageNum
  }
  let { rows, code } = await appCommentPageList(params) as any;
  if (code == '200') {
    if (rows.length <= 0) {
      state.isMore = true;
      return false;
    }
    state.pageNum++;
    state.messageList.push(...rows);
  }
}
onShow(() => {
  // 留言查询-分页（已读、未读公用）
  if(state.navFlag === 0){
    getAppCommentPageList()
  } else {
    getReadList()
  }
})

onHide(() => {
  state.pageNum = 1; //页数
  state.messageList = [];
  state.isMore = false;
})

// 切换已读未读
const navClick = (index: number) => {
  state.navFlag = index
  state.pageSize = 10; //条数
  state.pageNum = 1; //页数
  state.messageList = [];
  state.isMore = false;
  if(index === 0){
    getAppCommentPageList()
  } else {
    getReadList()
  }
}
// 通知-已读
const readFn =async(ids: number)=>{
  let params = {
   id: ids
  }
  let { code } = await read(params) as any;
  if (code == '200') {
    getReadList()
  }
}
// 跳转详情
const goDetail = (id: number) => {
  uni.navigateTo({
    url: `/pagesIndex/message/messageDetails?&id=${id}&flag=${state.navFlag}`
  })
  readFn(id)
}
const appCommentUpdateReadFn = async(ids:any)=>{
  let params = {
   id: ids
  }
  let { code } = await appCommentUpdateRead(params) as any;
  if (code == '200') {
    getAppCommentPageList()
  }
}
const getUpdateRead=(data:any)=>{
  //console.log(data, '点击详情')
  appCommentUpdateReadFn(data)
}
// 类型 type 0-留言  1-通知
const emailClick = async()=>{
  modal.value.open()
}
const trashClick = async()=>{
  modalDel.value.open()
}
const confirm= async()=>{
  let params = {
    type: state.navFlag
  }
  let { code } = await updateAll(params) as any;
  if (code == '200') {
    state.pageSize = 10
    state.pageNum = 1
    state.navFlag === 0?getAppCommentPageList():getReadList()
    state.messageList = []
    modal.value.close()
  }
}
const cancel=()=>{
  modal.value.close()
}
const cancelDel=()=>{
  modalDel.value.close()
}
const confirmDel= async()=>{
  let params = {
    type: state.navFlag
  }
  let { code } = await removeAll(params) as any;
  if (code == '200') {
    state.pageSize = 10
    state.pageNum = 1
    state.navFlag === 0?getAppCommentPageList():getReadList()
    state.messageList = []
    modalDel.value.close()
  }
}
onReachBottom((e: any) => {
  if(state.navFlag === 0){
    getAppCommentPageList()
  } else {
    getReadList()
  }
})
</script>
<template>
  <view>
    <!--  -->
    <view class="tab-wrap">
      <view class="flex nav-title">
        <view :class="['nav-box', 'flex', 'flex-center', { 'select-box': state.navFlag == 0 }]" @tap="navClick(0)">
          <view class="msg-text">留言</view>
        </view>
        <view :class="['nav-box', 'flex', 'flex-center', { 'select-box': state.navFlag == 1 }]" @tap="navClick(1)">
          <view class="msg-text">通知</view>
        </view>
      </view>
      <view class="icon-wrap">
        <view class="email-all">
          <uv-icon name="email" color="#333333" size="16" @click="emailClick"></uv-icon>
        </view>
        <view class="email-all">
          <uv-icon name="trash" color="#333333" size="16" @click="trashClick"></uv-icon>
        </view>
      </view>
    </view>
    <view v-if="state.navFlag === 1">
      <view v-for="(item, index) in state.messageList">
        <cardBox :cardItem="item" :navFlag="state.navFlag" @tap="goDetail(item.id)"></cardBox>
      </view>
      <noneBox v-if="state.messageList.length <= 0"></noneBox>
    </view>
    <view v-if="state.navFlag === 0">
      <view v-for="(item, index) in state.messageList">
        <leave :cardItem="item" :navFlag="state.navFlag" @getUpdateRead="getUpdateRead"></leave>
      </view>
      <noneBox v-if="state.messageList.length <= 0"></noneBox>
    </view>
    <uv-modal ref="modal" title="全部已读" content='是否全部已读!' showCancelButton @confirm="confirm" @cancel="cancel"></uv-modal>
    <uv-modal ref="modalDel" title="全部已读" content='是否全部清除!' showCancelButton @confirm="confirmDel" @cancel="cancelDel"></uv-modal>
  </view>
</template>
<style lang="scss" scoped>
.nav-title {
  background-color: #ffffff;
  padding-top: 34rpx;
  width: 30%;
  .nav-box {
    width: 50%;
    position: relative;
    .msg-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;

      &::after {
        content: '';
        display: block;
        width: 40rpx;
        height: 8rpx;
        margin-top: 1rpx;
        border-radius: 4rpx;
        background-color: rgb(255, 255, 255);
        margin-top: 17rpx;
      }
    }
  }

  .select-box {
    .msg-text {
      font-size: 32rpx;
      color: rgba(195, 62, 41, 1);
      font-weight: bold;
      &::after {
        background-color: rgba(195, 62, 41, 1);
        height: 8rpx;
        border-radius: 4rpx;
        margin-top: 17rpx;
      }
    }
  }
}
.email-all{
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EDEDED;
  border-radius: 50%;
  padding:16rpx;
  font-weight: 400;
  font-size: 22rpx;
  color: #7D7D7D;
  margin: 0 10rpx;
}
.tab-wrap{
  position: relative;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.delete-btn{
  background: #EDEDED;
  border-radius:50%;
  width: 44rpx;
  height: 44rpx;
}
.icon-wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>

